<template>
    <header class="text-center py-8">
      <div class="flex justify-center mb-4">
        <div class="bg-indigo-100 p-4 rounded-full">
          <i class="fas fa-desktop text-indigo-600 text-4xl"></i>
        </div>
      </div>
      <h1 class="text-3xl md:text-4xl font-bold text-indigo-800">
        桌面应用脚手架
      </h1>
      <p class="mt-2 text-gray-600 max-w-2xl mx-auto">
        PyWebView + FastAPI + Vue3 + TailwindCSS 一体化解决方案
      </p>
      
      <div class="mt-6 flex justify-center space-x-4">
        <button 
          @click="$emit('scroll-to', 'api-demo')"
          class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition"
        >
          API示例
        </button>
        <button 
          @click="$emit('scroll-to', 'calculator')"
          class="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"
        >
          计算器
        </button>
        <button 
          @click="$emit('scroll-to', 'system-info')"
          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
        >
          系统信息
        </button>
      </div>
    </header>
  </template>
  
  <script>
  export default {
    name: 'Header'
  }
  </script>
